<template>
	<!-- <div class="flex items-center relative cursor-pointer">
		<base-icon class="text-[20px]" name="information"></base-icon>
		<div
			class="w-2 h-2 rounded-full bg-primary absolute -right-[1px] -top-[1px] border-2 border-[#303e48]"></div>
	</div> -->
	<div class="flex h-full items-center relative cursor-pointer" @click="showNoticeModal">
		<base-icon class="text-[20px]" name="information"></base-icon>
		<div
			v-if="showUnread"
			class="w-2 h-2 rounded-full bg-primary absolute -right-[1px] -top-[4px] border-[1px] border-border-4"></div>
	</div>
</template>
<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { computed } from 'vue'
import { useAppStore, useProfileStore } from '@/store'

const appStore = useAppStore()
const profileStore = useProfileStore()

const showUnread = computed(() => {
	return appStore.noticeUnread > 0
})

const showNoticeModal = () =>
	profileStore.showNotice({
		show: true
	})
</script>
